<template>
  <div class="dd">
    <div id="container"></div>
    <div class="menu">
      <div class="shubiao">左键旋转</div>
      <div class="shubiao">右键拖动</div>
      <div class="top" @click="resetPosition">点击刷新</div>
    </div>
    <div class="tag" id="tag">
      <div style="color: white; font-size: 10px">{{ RecData }}</div>
      <div style="font-size: 11px; font-weight: bold">23.6°C</div>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  name: "",
  data() {
    return {
      clock: new THREE.Clock(),
      RecData: "",

      //数据结尾
    };
  },
  mounted() {
    this.init();
    this.render();
    this.scene;
    this.camera;
    this.controls;
    this.renderer;
  },

  created() {
    this.getData();
  },
  beforeDestroy() {
    this.scene = null;
    this.camera = null;
    this.controls = null;
    this.renderer = null;
  },

  methods: {
    getData() {
      this.RecData = "ssssss";
      // this.axios.get("/api/product/getproductTC").then(
      //   (res) => {
      //     this.RecData = res.data.data[1].PT_CategoryName;
      //   },
      //   (res) => {
      //     console.log("error");
      //   }
      // );
    },
    //3维转2维
    transPosition(position) {
      let world_vector = new THREE.Vector3(position.x, position.y, position.z);
      let vector = world_vector.project(this.camera);
      let halfWidth = window.innerWidth / 2,
        halfHeight = window.innerHeight / 2;
      return {
        x: Math.round(vector.x * halfWidth + halfWidth),
        y: Math.round(-vector.y * halfHeight + halfHeight),
      };
    },
    divRender() {
      //计算三维坐标对应的屏幕坐标
      var position = new THREE.Vector3(30, 30, 10);
      var windowPosition = this.transPosition(position);
      var left = windowPosition.x;
      var top = windowPosition.y;
      //设置div屏幕位置
      let div = document.getElementById("tag");
      div.style.display = "";
      div.style.left = left + "px";
      div.style.top = top + "px";
    },
    //模型初始化
    init() {
      let container = document.getElementById("container");
      this.scene = new THREE.Scene();
      //自定义

      ///////////////////-------------------- 中心 柱子
      // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
      var geometry21 = new THREE.CircleGeometry(10, 50);
      var material21 = new THREE.MeshPhongMaterial({
        color: 0x363636,
      });
      var mesh21 = new THREE.Mesh(geometry21, material21); //网格模型对象Mesh
      mesh21.translateY(-20); //球体网格模型沿Y轴正方向平移120
      mesh21.rotateX(Math.PI / 2);
      this.scene.add(mesh21);
      // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
      var geometry22 = new THREE.CircleGeometry(10, 50);
      var material22 = new THREE.MeshPhongMaterial({
        color: 0x363636,
      });
      var mesh22 = new THREE.Mesh(geometry22, material22); //网格模型对象Mesh
      mesh22.translateY(100); //球体网格模型沿Y轴正方向平移120
      mesh22.rotateX((Math.PI / 2) * 3);
      this.scene.add(mesh22);
      // /创建管道成型的路径(3D样条曲线)
      var path = new THREE.CatmullRomCurve3([
        new THREE.Vector3(0, -20, 0),
        new THREE.Vector3(0, 100, 0),
      ]);
      // path:路径   40：沿着轨迹细分数  2：管道半径   25：管道截面圆细分数
      var geometry = new THREE.TubeGeometry(path, 40, 10, 25);
      var material3 = new THREE.MeshPhongMaterial({
        color: 0x5a8fcc, //三角面颜色
        side: THREE.DoubleSide, //两面可见
        //map: texture, //设置颜色贴图属性值
      }); //材质对象
      material3.wireframe = false; //线条模式渲染(查看细分数)
      var mesh3 = new THREE.Mesh(geometry, material3); //旋转网格模型对象
      this.scene.add(mesh3); //旋转网格模型添加到场景中

      //利用一个轴对象以可视化的3轴以简单的方式。X轴是红色的。Y轴是绿色的。Z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。要添加这个帮手，使用下面的代码：
      var axisHelper = new THREE.AxisHelper(1000);
      this.scene.add(axisHelper);

      /*
        添加光源
      */

      //点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(0, 1000, 0); //点光源位置
      this.scene.add(point); //点光源添加到场景中
      var point_2 = new THREE.PointLight(0xff00ff);
      point_2.position.set(1000, 1000, 1000); //点光源位置
      this.scene.add(point_2); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x999999);
      this.scene.add(ambient);
      /**
       * 相机设置
       */
      this.camera = new THREE.PerspectiveCamera(
        45,
        container.clientWidth / container.clientHeight,
        0.1,
        10000
      );
      this.camera.position.set(250, 100, 250);
      this.camera.lookAt(0, 0, 0);
      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        precision: "highp",
      });
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.renderer.setClearColor("#a7acac", 1.0); //背景色

      container.appendChild(this.renderer.domElement);
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.target.set(0, 0, 0);
      this.controls.enableZoom = true;
      this.controls.zoomSpeed = 2.0;
      this.controls.enablePan = true; //开启右键拖拽
      //设置相机距离原点的最远距离
      this.controls.minDistance = 2;
      //设置相机距离原点的最远距离
      this.controls.maxDistance = 1000;
      this.controls.update();
    },
    //执行渲染操作
    render() {
      requestAnimationFrame(this.render);
      this.renderer.render && this.renderer.render(this.scene, this.camera);
      this.divRender();
      var time = this.clock.getDelta();
      if (this.mixer) {
        this.mixer.update(time);
      }
      window.addEventListener("click", this.onMouseClick, false);
    },
    resetPosition() {
      this.camera.position.set(250, 100, 250);
      this.camera.lookAt(0, 0, 0);
      this.controls.target.set(0, 0, 0);
    },

    onMouseClick(event) {
      var raycaster = new THREE.Raycaster();
      var mouse = new THREE.Vector2();
      //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标

      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = (event.clientY / window.innerHeight) * 2 + 1;

      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
      raycaster.setFromCamera(mouse, this.camera);

      // 获取raycaster直线和所有模型相交的数组集合
      var intersects = raycaster.intersectObjects(this.scene.children);
      console.log(intersects);

      //将所有的相交的模型的颜色设置为红色
      for (var i = 0; i < intersects.length; i++) {
        intersects[i].object.material.color.set(0xff0000);
      }
    },
    //方法结尾
  },
};
</script>
<style scoped>
#container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.dd {
  margin: 0;
  padding: 0;
  height: 100%;
}
.top {
  width: 120px;
  height: 55px;
}
.top img {
  width: 20%;
  vertical-align: middle;
  margin: 10px 5px 10px 25px;
}
.shubiao {
  width: 120px;
  height: 60px;
}
.shubiao img {
  width: 20%;
  vertical-align: middle;
  margin: 5px 5px 5px 25px;
}

.menu {
  position: fixed;
  z-index: 100;
  top: 30vh;
  right: 30px;
  color: #fff;
}
.tag {
  position: absolute;
  background-color: rgb(46, 197, 53);
  opacity: 0.5;
  font-size: 4px;
  color: aqua;
  width: 50px;
  height: 40px;
  padding: 1px 1px 1px;
}
</style>